<template>
  <Nav_bar :title="'个人中心'" />
  <div class="user_centre_box">
    <!-- 用户信息 -->
    <div class="head_box">
      <img class="_img" src="/src/assets/logo/logo.png" alt="" />
      <div class="nickname_box">
        <div class="nickname">名称：{{ userInfoStore.userInfo.nickName }}</div>
        <div class="user_id">账号：{{ phoneInfoStore.phone }}</div>
      </div>
    </div>
    <!-- 商品核销 -->
    <div class="_versions" @click="openScan" style="margin-top: 10px;">
      <span>商品核销{{ scanText }}{{ number }}</span>
      <van-icon name="arrow" />
    </div>
    <!-- 设备开关列表 -->
    <div class="machine_list">
      <div class="machine_list_head">
        <span>设备编号列表</span>
        <span>饭宝在线状态</span>
      </div>
      <div class="machine_item" v-for="item in switchList">
        <span>{{ item.machineId }}</span>
        <van-switch
          @change="switch_item(item)"
          v-model="item.status"
          active-color="#0DB383"
          inactive-color="#E6E6E6"
        />
      </div>
    </div>
    <div class="_versions">
      <span>当前版本</span>
      <span class="_versions_id">V1.0</span>
    </div>
    <div class="_versions" @click="Msg('此功能正在开发中')">
      <span>常见问题</span>
      <van-icon name="arrow" />
    </div>
    <van-button
      class="_loginOut"
      type="primary"
      round
      size="normal"
      color="linear-gradient(to right, #66dfbc, #14c691)"
      :loading="loading"
      :block="true"
      @click="loginOut()"
    >
      退出登录
    </van-button>
  </div>
  <Tabbar />
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useUserInfoStore, usePhoneInfoStore } from '@/stores'
import { deleteLoginOutApi, getConfigApi, getUserMachineListApi, putMachineStateApi, verificationApi } from '@/api/user/user'
import { useRouter } from 'vue-router'
import { Msg } from '@/utils/tools'

const env = process.env.NODE_ENV

const $router = useRouter()
const phoneInfoStore = usePhoneInfoStore()
const userInfoStore = useUserInfoStore()
const switchList = ref([])

const loading = ref(false)
/** 触发开关 切换状态 */
const switch_item = async (item) => {
  console.log(item)
  const res = await putMachineStateApi({
    machineId: item.machineId,
    status: item.status ? true : false,
  })
  res.code === 200 ? getMachineList() : null
}

/**退出登录 */
const loginOut = async () => {
  loading.value = true
  await deleteLoginOutApi()
  userInfoStore.deleteUserInfo()
  userInfoStore.deleteToken()
  sessionStorage.removeItem('flag')
  localStorage.removeItem('userInfo')
  loading.value = false
  $router.push('/login')
}
/**获取用户绑定的设备列表 */
const getMachineList = async () => {
  const res = await getUserMachineListApi()
  // console.log(res)
  switchList.value = res.data
}

const jWeixin = window.jWeixin
function getConfig() {
  const url = location.href.split('#')[0]
  getConfigApi({url}).then(res => {
    const data = res.data;
    jWeixin.config({
      debug: false,
      appId: data.appId,
      timestamp: data.timestamp,
      nonceStr: data.nonceStr,
      signature: data.signature,
      jsApiList: ['scanQRCode']
    });
  })
}

function openScan() {
  jWeixin.scanQRCode({
      needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
      scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
      success: function (res) {
          console.log("调用扫描成功", res);
          var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
          verificationApi(result).then(res => {
            Msg('核销成功')
          })
          // searchValue.value = result;
          // getUseorderinfo();
      },
      error: function (res) {
          console.log(res)
          if (res.errMsg.indexOf('function_not_exist') > 0) {
            Msg('版本过低请升级')
          }
      }
  });
  jWeixin.error(function (res) {
      // alert("错误信息:" + JSON.stringify(res));
  });
}

onMounted(() => {
  getConfig()
  getMachineList()
})
</script>

<style lang="scss" scoped>
.user_centre_box {
  position: relative;
  width: 100%;
  min-height: calc(100% - 44px);
  padding: 7px 14px 150px;
  background-color: var(--defaultBgc);
  .head_box {
    display: flex;
    align-items: center;
    width: 347px;
    height: 63px;
    border-radius: 5px;
    background-color: #fff;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.09));
    ._img {
      width: 41px;
      height: 41px;
      border-radius: 41px;
      margin: 0 14px 0 8px;
    }
    .nickname_box {
      font-size: 12px;
      color: var(--c3);
      .user_id {
        margin-top: 4px;
        color: var(--c9);
      }
    }
  }
  .machine_list {
    width: 347px;
    margin: 10px 0;
    padding: 15px 6px 9px 6px;
    background-color: #fff;
    border-radius: 5px;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.09));
    .machine_list_head,
    .machine_item {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      color: #333;
    }
    .machine_item {
      padding-right: 12px;
      margin-top: 13px;
      height: 23px;
      color: #999;
    }
  }
  ._versions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 347px;
    height: 46px;
    padding: 0 14px 0 6px;
    margin-bottom: 10px;
    border-radius: 5px;
    background-color: #fff;
    font-size: 12px;
    color: #333;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.09));
    ._versions_id {
      font-size: 10px;
    }
  }
  ._loginOut {
    position: absolute;
    bottom: 87px;
    left: 14px;
    width: 347px;
    height: 46px;
    font-size: 12px;
    color: #fff;
    border-radius: 24px;
    background: linear-gradient(to right, #76e4c4, #0dc38c);
  }
}
.van-nav-bar {
  height: 44px;
  line-height: 44px;
  padding: 0 9px 0 5px;
  background-color: #5ed1ae;
  .van-nav-bar__content {
    height: 44px;
    line-height: 44px;
    .van-nav-bar__title {
      color: #fff;
      font-weight: 400;
      font-size: var(--fs18);
    }
  }
}
</style>
